<style scoped>

</style>
<template>
    <div id='myApp'>
        <Row style="margin-bottom: 10px;border-bottom: 1px solid #eeeeee;">
            <Col span="6" style="border-bottom:2px solid #2d8cf0 ;padding: 0 0 8px 18px;">
            <span style="color: #2d8cf0;">
                <Icon type="md-add-circle" />&nbsp;&nbsp;
                <span style="color: black;">接口管理&nbsp;&nbsp;>&nbsp;&nbsp;</span>
                API管理
            </span>
            </Col>
            <Col span="5" offset="13">
            <Button @click="addApi" type="success" label="small"
                style="border: none;height: 27px; float: right;">发布API</Button>
            </Col>
        </Row>
        <Row style="margin-bottom: 20px;">
            <Col span="7">
            接口名称：
            <Input v-model="condition.name" style="width:70%;" />
            </Col>
            <Col span="7">
            接口地址：
            <Input v-model="condition.url" style="width:70%;" />
            </Col>
            <Col span="7">
            接口状态：
            <Select v-model="condition.enabled" style="width:70%">
                <Option v-for="(item,index) in enabledData" :value="item.value" :key="index">{{item.label}}</Option>
            </Select>
            </Col>
            <Col span="2">
            &nbsp;&nbsp;
            <Button type="primary" @click="getDataList">
                <Icon type="ios-search" /></Button>
            </Col>
        </Row>
        <Table :columns="httpColumns" :data="httpData"></Table>
        <div style="float: right; margin-top: 15px">
            <Page :total="dataCount" :page-size="condition.pageSize"  class="paging" @on-change="getDataList"
                @on-page-size-change="pages" show-elevator show-sizer></Page>
        </div>
    </div>
    </div>
</template>
<script>

    import { mapState, mapActions } from 'vuex'
    import zmitiUtil from '../../../lib/util'

    export default {
        computed: mapState({
            Authorization: state => state.Authorization
        }),

        data() {
            return {
                ruleForm: {
                    name: '',
                    type: '',
                    config: ''
                },
                condition:{
                    name:'',
                    url:'',
                    pageSize:10,
                    pageNO:0
                },
                enabledData:[{
                    value:'true',
                    label:'开启'
                },{
                    value:'false',
                    label:'关闭'
                }],
                ruleValidate: {

                },
                modal1: false,
                dataCount: 0,
                pageSize: 10,
                ajaxHttpData: [],
                xia: 0,
                httpColumns: [
                    {
                        title:'编号',
                        key:'id',
                        align:'center',
                        width:230,
                    },
                    {
                        title: 'API名称',
                        key: 'name',
                        align: 'center'
                    },
                    {
                        title: 'API地址',
                        key: 'url',
                        align: 'center'
                    },
                    {
                        title: '缓存频率',
                        key: 'frequency',
                        align: 'center',
                        render:(h,params)=>{
                            return h('div',params.row.frequency+'分钟')
                        }
                    },
                    {
                        title: '状态',
                        width:80,
                        key: 'status',
                        align: 'center',
                        render:(h,params)=>{
                            return h('div',params.row.enabled==true?'开启':'关闭')
                        }
                    },
                    {
                        title: '更新时间',
                        key: 'lastModified',
                        align: 'center',
                        render:(h,params)=>{
                            return h('div',{},zmitiUtil.DateCn(params.row.lastModified))
                        }
                    },
                    {
                        title: '操作',
                        // key: 'operate',
                        width: 330,
                        align: 'center',
                        render: (h, params) => {
                            const row = params.row;
                            return h('div', [
                            	h('Tooltip', {
                                    props: {
                                        placement: 'top',
                                        content: '停用/启用'
                                    }
                                }, [
                                    h('Button', {
                                        props: {
                                            size: 'small',
                                            type:'text'
                                        },
                                        style: {
                                            marginRight: '5px',
                                            color:'#2d8cf0'
                                        },
                                        on: {
                                            click: () => {
                                                //停用启用操作
                                                let enabled=!params.row.enabled;
                                                this.checkApi(params,enabled)

                                            }
                                        }
                                    }, params.row.enabled==true?'停用':'启用')
                                ]),
                                h('Button', {
                                    props: {
                                        size: 'small',
                                        type: 'text'
                                    },
                                    style: {
                                        marginRight: '5px',
                                        color:'#2d8cf0'
                                    },
                                    on: {
                                        click: () => {
                                            // 查看操作
                                            this.$router.push({ name: 'ViewAPI', params: { id: params.row.id,status:0 } })
                                        }
                                    }
                                }, '查看API'),
                                /*h('Button', {
                                    props: {
                                        size: 'small',
                                        type: 'text'
                                    },
                                    style: {
                                        marginRight: '5px',
                                        color:'#2d8cf0'
                                    },
                                    on: {
                                        click: () => {
                                            this.$router.push({ name: 'CallStatistics', params: { name: params.row.name } })
                                        }
                                    }
                                }, '调用统计'),*/
                                h('Button', {
                                    props: {
                                        size: 'small',
                                        type: 'text'
                                    },
                                    style: {
                                        marginRight: '5px',
                                        color:'#2d8cf0'
                                    },
                                    on: {
                                        click: () => {
                                            // 测试操作
                                            this.checking(params.row.name,params.row.id)
                                        }
                                    }
                                }, '测试'),
                                h('Poptip', {
                                          props: {
                                              confirm: true,
                                              type: 'error',
                                              size: 'large',
                                              title: '你确定要删除吗?',
                                              transfer:true
                                          }, 
                                          on: {
                                              'on-ok': () => {
                                                  this.deleteApi(params.row.id);
                                              }
                                          }
                                      }, [
                                          h('Button', {
                                              props: {
                                                  type: 'text',
                                                  size: 'small'                                                 
                                              },
                                              style: {
                                                  color:'#2d8cf0'
                                              },
                                          },'删除')
                                ])
                            ]);
                        }
                    }

                ],
                httpData: []
            }
        },
        mounted() {
            // 获取SQL任务列表，待修改
            let _this = this;
            _this.getDataList(1);
        },
        methods: {
            save() {
                this.$Message.success('保存成功！');
                location.reload()
            },
            reset() {
                this.$Message.info('Clicked cancel');
            },
            addApi(){
                this.$router.push({
                    'path':'/postAPI'
                })
            },
            pages(num) { //修改每页显示条数时调用
                this.condition.pageSize = num;
                this.condition.pageNO=1;
                setTimeout(()=>{
                    this.getDataList(1);
                },300)                
            },            
            getDataList(index){//列出所有接口
                var _this = this;                
                var path='apiweb/list';
                var postData = _this.condition;
                _this.condition.pageNO=index;
                zmitiUtil.Ajax(path,postData).then(res => {
                    var data = res.data;               
                    if (data.results) {
                        _this.httpData=data.results;
                        _this.dataCount=data.total;                 
                    }else{
                        console.log(res.data,'错误');
                        _this.$Message.error(data.result);
                    }
                }).catch((error) => {
                    console.log(error,'error');
                });
            },
            checkApi(params,enabled){//启用状态
                var _this = this;                
                var path='apiweb/enable';
                var postData = {//参数
                	id:params.row.id,
                    enabled
                }
                zmitiUtil.Ajax(path,postData).then(res => {
                    var data = res.data;               
                    if (data.code==1) {
                        _this.httpData[params.index].enabled=enabled
                        _this.$Message.success('设置成功!');
                    }else{
                        console.log(res.data,'错误');
                        _this.$Message.error(data.result);
                    }
                }).catch((error) => {
                    console.log(error,'error');
                });
            },
            deleteApi(id){//删除
                var _this = this;                
                var path='apiweb/delete';
                var postData = {//参数
                    id
                }
                zmitiUtil.Ajax(path,postData).then(res => {
                    var data = res.data;               
                    if (data.code==1) {
                        _this.$Message.success('删除成功!');
                        _this.getDataList(1);
                    }else{
                        console.log(res.data,'错误');
                        _this.$Message.error(data.result);
                    }
                }).catch((error) => {
                    console.log(error,'error');
                });
            },
            checking(value,id){
                var _this = this;
                // 异步验证
                setTimeout(() => {
                    var path='apikey/list';
                    var postData = {
                        apiName:value
                    };
                    zmitiUtil.Ajax(path,postData).then(res => {
                        var data = res.data;
                        
                        if(res.data.total>0){
                            _this.$router.push({ 
                                name: 'TestAPI',
                                params: { 
                                    id
                                } 
                            })
                        }else{                            
                            _this.$Message.error('您还没有申请API KEY，请先去创建一个API KEY再进行测试');
                        }
                        
                    }).catch((error) => {
                        console.log(error,'error');
                    });

                }, 300);
            }
            
        },
        created() {
            // this.handleListApproveHttp();
        }
    }
</script>